<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>会议签到二维码</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
    <script th:src="@{/js/jquery.min.js}"></script>
</head>
<body>
<div class="container text-center mt-5">
    <h2>会议签到二维码</h2>
    <div class="mt-4 mb-4">
        <img id="qrcodeImg" th:src="@{/app/record/qrcode/img/{meetingId}(meetingId=${meetingId})}" 
             alt="签到二维码" style="max-width: 300px;">
    </div>
    <div class="mt-3">
        <button id="shareBtn" class="btn btn-primary">
            <i class="fa fa-share-alt"></i> 分享二维码
        </button>
    </div>
</div>

<script>
    $(function() {
        // 每10秒刷新一次二维码
        setInterval(function() {
            $('#qrcodeImg').attr('src', '/app/record/qrcode/img/' + [[${meetingId}]] + '?t=' + new Date().getTime());
        }, 10000);

        // 分享功能
        $('#shareBtn').click(function() {
            if (navigator.share) {
                navigator.share({
                    title: '会议签到二维码',
                    text: '请扫描二维码完成签到',
                    url: window.location.href
                }).catch(err => {
                    console.log('分享失败:', err);
                    alert('分享失败，请手动复制链接');
                });
            } else {
                // 兼容不支持Web Share API的浏览器
                const tempInput = document.createElement('input');
                tempInput.value = window.location.href;
                document.body.appendChild(tempInput);
                tempInput.select();
                document.execCommand('copy');
                document.body.removeChild(tempInput);
                alert('链接已复制到剪贴板');
            }
        });
    });
</script>
</body>
</html>